<template>
	<view class="container">
		<!-- 头部导航 -->
		<page-navbar title="我的预约"></page-navbar>

		<!-- 分段器 -->
		<view class="segmented-control-container">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
				activeColor="#2E7D32"></uni-segmented-control>
		</view>

		<!-- 预约列表 -->
		<scroll-view class="order-list-container" scroll-y="true">
			<view v-if="filteredOrders.length > 0">
				<view class="order-card" v-for="order in filteredOrders" :key="order.id">
					<view class="order-header">
						<image class="order-icon" src="/static/svgIcon/clipboard.svg"></image>
						<text class="order-title">{{ order.info?.title || '-' }}</text>
						<text class="order-status" :class="statusColor(order.status)">{{ getStatusText(order.status)
						}}</text>
					</view>
					<view class="order-body">
						<image class="order-image" :src="common.defaultImg(order.info?.coverId)" mode="aspectFill">
						</image>
						<view class="order-details">
							<view class="detail-item">
								<text class="detail-label">预约编号：</text>
								<text class="detail-value">{{ order.id }}</text>
							</view>
							<view class="detail-item">
								<text class="detail-label">预约日期：</text>
								<text class="detail-value">{{ filterTime(order.bookingDay) }}</text>
							</view>
							<view class="detail-item">
								<text class="detail-label">预约时间：</text>
								<text class="detail-value">{{ order.bookingTime }}</text>
							</view>
							<view class="detail-item">
								<text class="detail-label">数量：</text>
								<text class="detail-value">{{ order.tourist?.length }}人</text>
							</view>
						</view>
					</view>
					<view class="order-footer">

						<button class="action-button-plain" v-if="order.status === 1" border="none"
							@click="cancelOrder(order.id)" type="warn">取消预约</button>
						<button class="action-button-plain" type="primary" @click="goDetail(order)">查看详情</button>
					</view>
				</view>
			</view>
			<view v-else class="empty-state">
				<image class="empty-image" src="/static/images/empty.svg" mode="widthFix"></image>
				<text class="empty-text">暂无相关预约</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, computed, nextTick, toRefs } from 'vue';
import { onLoad, onShow, onShareAppMessage } from '@dcloudio/uni-app';
import api from '@/api/index.js';
import config from '@/config/index.js'
import common from '@/utils/common.js';

import useUserInfoStore from '@/stores/user.js';
import { storeToRefs } from 'pinia';
import useSelectStore from '@/stores/select.js';
import dayjs from 'dayjs';

const imgUrl = uni.imgUrl

const current = ref(0);
const items = ref(['全部', '待使用', '已取消', '已完成']);

const orderList = ref([]);

onLoad((options) => {
	current.value = Number(options.type) || 0
})

onShow(() => {
	getData();
});

onMounted(() => { });

const filterTime = (time) => {
	return dayjs(time).format('YYYY-MM-DD');
}

const getData = () => {
	api.activistApi.bookingList().then(res => {
		// 1已预约2已取消3已使用
		orderList.value = res;
	})
}

const getStatusText = (status) => {
	const map = {
		1: '待使用',
		2: '已取消',
		3: '已完成'
	};
	return map[status] || '其他';
};

const filteredOrders = computed(() => {
	if (current.value === 0) {
		return orderList.value;
	}
	return orderList.value.filter(order => order.status === current.value);
});

const onClickItem = e => {
	if (current.value !== e.currentIndex) {
		current.value = e.currentIndex;
	}
};

const statusColor = status => {
	switch (status) {
		case 1:
			return 'status-active';
		case 2:
			return 'status-completed';
		case 3:
			return 'status-cancelled';
		default:
			return '';
	}
};



const cancelOrder = (orderId) => {
	uni.showModal({
		title: '提示',
		content: '确定取消该预约吗？',
		success: (res) => {
			if (res.confirm) {
				api.activistApi.cancel({ id: [orderId] }).then(res => {
					uni.showToast({
						title: '预约已取消',
						icon: 'none'
					});
					getData();
				});
			}
		}
	})
}

const goDetail = (order) => {
	uni.navigateTo({
		url: `/pages/details/orderDetail?order=${encodeURIComponent(JSON.stringify(order))}`
	});
}

</script>

<style lang="scss" scoped>
.container {
	background-color: #f2f1f6;
	min-height: 100vh;
	width: 100vw;
	display: flex;
	flex-direction: column;
}

.segmented-control-container {
	background-color: #fff;
	padding: 10rpx 0;
}

.order-list-container {
	flex: 1;
	overflow: hidden;
	padding: 20rpx;
	box-sizing: border-box;
}

.order-card {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.order-header {
	display: flex;
	align-items: center;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #f2f1f6;

	.order-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 16rpx;
	}

	.order-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		flex: 1;
	}

	.order-status {
		font-size: 26rpx;
	}

	.status-active {
		color: #52c41a;
	}

	.status-completed {
		color: #1890ff;
	}

	.status-cancelled {
		color: #bfbfbf;
	}
}

.order-body {
	display: flex;
	padding-top: 20rpx;
	align-items: center;
	gap: 24rpx;

	.order-image {
		width: 180rpx;
		height: 140rpx;
		border-radius: 8rpx;
		flex-shrink: 0;
		display: block;
	}

	.order-details {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 26rpx;
		flex: 1;

		.detail-item {
			display: flex;

			.detail-label {
				color: #999;
			}

			.detail-value {
				color: #333;
			}
		}
	}
}

.order-footer {
	display: flex;
	justify-content: flex-end;
	gap: 24rpx;
	padding-top: 20rpx;
	margin-top: 20rpx;
	border-top: 1rpx solid #f2f1f6;

	.action-button-plain {
		font-size: 26rpx;
		padding: 0 30rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		margin: 0;
	}
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 100rpx;

	.empty-image {
		width: 300rpx;
		margin-bottom: 20rpx;
	}

	.empty-text {
		color: #999;
		font-size: 28rpx;
	}
}
</style>
